<template>
	<view class="content">
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<image class="logo" src="/static/logo.png"></image>
		<view class="uni-common-mt form">
				<view style="padding: 0 15px; margin-top: 10rpx;">
					<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="userInfo">
						<u-form-item label="手机号" labelWidth="60" prop="mobile" type="number" ref="item1" required>
							<u--input v-model="userInfo.mobile" placeholder="请输入手机号" clearable maxlength="11"></u--input>
						</u-form-item>
					</u--form>
					<view class="btn-save">
						<u-button text="获取验证码" type="primary" @click="getCheckCode"></u-button>
					</view>
				</view>
			<view class="radio"><radio value="1"></radio><text>我已阅读并同意《用户注册协议》《用户隐私协议》《用户信息授权书》《用户风险告知书》</text></view>
		</view>

		<view class="font">
			<view class="itm">
				本平台 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
			</view>
			<view class="itm">
				电话：021-64370777
			</view>
			
			<view class="itm">
				工作时间：09:00-21:00
			</view>
		</view>
	</view>
	
	<u-modal :title="sendMobile" :show="showModal" @confirm="confirm"  @close="showModal = false">
	  <view class="p-3">
	    <u-input v-model="inputValue" placeholder="请输入验证码"></u-input>
	  </view>
	</u-modal>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					mobile: '',
				},
				title: 'X先生 136****6666 获取180000额度 1分钟前',
				codeValue:'',
				showModal: false,
				sendMobile:"验证码已发送至13222222222",
				// 验证规则
				rules: {
					'mobile': [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change'],
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
				}
			}
		},
		
		onReady() {
			this.$refs.userInfo.setRules(this.rules)
		},
		
		onLoad() {

		},
		methods: {
			getCheckCode(){
				console.log("获取验证码")
			this.showModal = !this.showModal
			},
			
			confirm(){
				console.log("提交验证码")
				// 跳转至用用户信息页
				uni.redirectTo({
					url:"/pages/uinfo/uinfo"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		background-color: white;
		height: 22vh;
		border: 1rpx solid Gray;
		.btn-save {
			width: 300rpx;
			margin: 0 auto;
			margin-top: 10rpx;
		}
	}

	.radio{
		margin-left: 20rpx;
		margin-top: 20rpx;
		height: 120rpx;
	}
	
	.font {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column; /* 纵向排列 */
		align-items: center;    /* 居中对齐 */
		width: 100%;            /* 容器宽度 */
	}

	.itm {
		text-align: center;      /* 文本居中 */
		width: 100%;             /* 容器宽度 */
		overflow-wrap: break-word; /* 超出宽度自动换行 */
		margin-bottom: 10px;     /* 下面留点空隙 */
	}
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 360rpx;
		width: 750rpx;
		margin-top: 6rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10rpx;
	}

	.text-area {
		width: 100%;
		height: 60rpx;
		background: black;
		opacity: 0.8;
		display: flex;
		justify-content: center;
	}
	
	.title {
		margin: auto;
		z-index: 999;
		font-size: 26rpx;
		color: white;
	}
</style>
